import { Component } from 'react'
import "../assent/css/mine.css"
// 图片
import yhk from "../assent/img/mine/payment.png"
import sh from "../assent/img/mine/py.png"
import pl from "../assent/img/mine/py1.png"
import qb from "../assent/img/mine/py2.png"
import dz1 from "../assent/img/mine/dz1.png"
import dz2 from "../assent/img/mine/dz2.png"
import dz3 from "../assent/img/mine/dz3.png"
import dz4 from "../assent/img/mine/dz4.png"
import dz5 from "../assent/img/mine/dz5.png"

// 轮播图
import React, { useRef } from 'react'
import { Swiper } from 'antd-mobile'
//引入axios

import { getbanner } from "../request/app.js"

class My extends Component {
    constructor() {
        super()
        this.colors = ["/uploads/banner/banner.png", "/uploads/banner/chengxin.png", "/uploads/banner/xue.png"]

    }
    render() {
        return (
            <div className='bg'>
                {/* 标题 */}
                <h1 className='mine'>我的</h1>
                {/* 大盒子包裹头像用户名什么的 */}
                <div className='order_bg'>
                    {/* 头像 */}
                    <div className='ei'>
                        <img src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658077200&t=c29926c9f9904c3f332267bf3c770ebd" className='header' />
                        <div className='floa'>
                            <p className='fonttitleh'> {JSON.parse(localStorage.getItem("userinfo")).nickname} </p>
                            <div className='iconuseror'>完善资料让小U更懂您</div>
                        </div>
                    </div>
                    <div className='Signin'>每日签到</div>

                    {/* 收藏 */}
                    <ul className='jl'>
                        <li>12
                            <p>我的收藏</p>
                        </li>
                        <li>12
                            <p>浏览记录</p>
                        </li>
                        <li><span>￥</span>
                            0
                            <p>我的红包</p>
                        </li>
                        <li>12
                            <p>优惠券</p>
                        </li>
                    </ul>
                    {/* 下面的订单 */}
                    <div className="usedname">
                        <h2>我的订单 <span>全部订单</span></h2>
                        <ul className='ul'>
                            <li>
                                <img src={yhk} />
                                <p className='ys'>代付款</p>
                            </li>
                            <li>
                                <img src={sh} className='img' />
                                <p className='ys'>代收货</p>
                            </li>
                            <li>
                                <img src={pl} />
                                <p className='ys'>评价</p>
                            </li>
                            <li>
                                <img src={qb} />
                                <p className='ys'>售后/退款</p>
                            </li>
                        </ul>
                    </div>
                </div>
                {/* 轮播图 */}
                <div id='banner'>
                    <Swiper autoplay loop>{
                        this.colors.map((color, index) => (
                            <Swiper.Item key={index}>
                                <div
                                    className="content"
                                    style={{ background: color }}
                                >
                                    {/* 写成图片 */}
                                    {/* {index + 1} */}
                                    <img src={color} />
                                </div>
                            </Swiper.Item>
                        ))
                    }</Swiper>
                </div>
                {/* 最下面 */}
                <div id='dizhi'>
                    <ul>
                        <li className='fl'>
                            <img src={dz1} />
                            <p>地址管理</p>
                        </li>
                        <li className='fl'>
                            <img src={dz2} />
                            <p>我的钱包</p>
                        </li >
                        <li className='fl'>
                            <img src={dz3} />
                            <p>我的二维码</p>
                        </li>
                        <li className='fl'>
                            <img src={dz4} />
                            <p>我的小伙伴</p>
                        </li>
                        <li className='fl'>
                            <img src={dz5} />
                            <p>0元试用</p>
                        </li>
                    </ul>
                </div>
            </div>
        );
    }
    componentDidMount() {
        getbanner().then(res => {
            console.log(res);
            this.setState({
                colors: res.list
            })
        })
    }
}
export default My